<template>
  <view class="container">
    <!-- 提示信息 -->
    <view class="info-box">
      <text class="info-text">
        为了保障正常提现，需要收集您和卡信息，全程保障隐私安全，请放心使用。
      </text>
    </view>

    <!-- 表单 -->
    <view class="form">
      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">姓名 *</text>
        <input
          v-model="name"
          class="input"
          placeholder="请输入持卡人姓名"
        />
      </view>
	  <!-- 姓名 -->
	  <view class="form-item">
	    <text class="label">身份号 *</text>
	    <input
	      v-model="idCard"
	      class="input"
	      placeholder="请输入持卡人身份号"
	    />
	  </view>
	  <!-- 银行名称 -->
	  <view class="form-item">
	    <text class="label">银行名称 *</text>
	    <picker mode="selector" :range="bankNames" @change="onBankChange" style="width: 100%;">
	      <text class="arrow-input">
	        {{ selectedBankName || '请选择银行名称' }}
	      </text>
	    </picker>
	  </view>

      <!-- 卡号 -->
      <view class="form-item">
        <text class="label">卡号 *</text>
        <input
          v-model="cardNumber"
          class="input"
          type="number"
          placeholder="请输入银行卡号"
        />
      </view>
	  
	  <!-- 开户地 -->
	  <view class="form-item">
	    <text class="label">开户地 *</text>
	    <picker mode="region" @change="onRegionChange" style="width: 100%;">
	      <text class="arrow-input">
	        {{ selectedRegion || '请选择银行卡开户地' }}
	      </text>
	    </picker>
	  </view>
	  
	  <view class="form-item">
	    <text class="label">预留电话 *</text>
	    <input
	      v-model="phoneNumber"
	      class="input"
	      type="number"
	      placeholder="请输入银行卡预留电话"
	    />
	  </view>
	  
      <!-- 协议 -->
      <view class="form-item agreement">
        <!-- 复选框 -->
            <checkbox-group v-model="agree" @change="handleCheckboxChange">
                <checkbox value="1" /> 我同意协议
            </checkbox-group>
          <text class="link" @click="openAgreement">《支付服务协议》</text>
      </view>
	  
    </view>
    <!-- 确认按钮 -->
    <button class="confirm-btn" :disabled="!canSubmit"  @click="submitForm">确认添加</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  agree:false,// 是否同意协议，初始化为 false
      accountType: '个人', // 账户类型，默认值为“个人”
	  name: '', // 持卡人姓名，初始化为空字符串
	  cardNumber: '', // 银行卡号，初始化为空字符串
	  idCard: '', // 身份证号，初始化为空字符串
	  phoneNumber: '', // 手机号，初始化为空字符串
	  selectedBank: null, // 选中的银行对象，初始化为 null
	  selectedBankName: '', // 选中的银行名称，仅用于展示，初始化为空字符串
	  selectedRegion: '', // 选中的开户地，初始化为空字符串
      banks: [], // 银行数据
	  bank_code:0,
	  is_edit:false,
	  id:0
    };
  },
  onLoad(e) {
	  if(e.id){
		  this.id = e.id
		  this.is_edit = true;
		  uni.setNavigationBarTitle({
		        title: '编辑银行卡'
		   });
	  }
  	 this.getBankAll();
  },
  computed: {
    // 提交按钮状态
    canSubmit() {
      return (
          this.name.trim() && 
		  this.idCard.trim() && 
		  this.selectedBankName.trim() &&
		  this.cardNumber.trim() &&
		  this.phoneNumber.trim() &&
		  this.selectedRegion.trim() &&
		  this.agree
      );
    },
    // 提取银行名称列表
    bankNames() {
      return this.banks.map((bank) => bank.bank_name);
    },
  },
  methods: {
	  getBankInfo(bank_id){
	  	let self = this;
	  	self._get('user.user/getBankInfo', {id:bank_id}, function(data) {
	  		self.name = data.data.b_name
			self.cardNumber= data.data.card_no
			self.idCard= data.data.id_card
			self.phoneNumber= data.data.phone
			self.selectedBankName= data.data.bank_name
			self.selectedRegion= data.data.address
			self.bank_code= data.data.bank_code
			self.id = data.data.id
			for (const item of self.banks) {
			  if(item.bank_name == self.selectedBankName){
				  self.selectedBank = item
				  console.info(self.selectedBank)
				  break;
			  }
			}
	  	});
	  },
	getBankAll(){
		let self = this;
		self._get('user.user/getAllBank', {}, function(data) {
			console.info(data.data)
			self.banks = data.data
			console.info(self.is_edit)
			if(self.is_edit){
				self.getBankInfo(self.id);
			}
		});
	},
	handleCheckboxChange(event) {
	  this.agree = event.detail.value == 1; // 更新绑定值
	  console.log('当前同意状态:', this.agree);
	},
    goBack() {
      uni.navigateBack();
    },
    onBankChange(event) {
      // 根据用户选择的索引获取对应的银行对象
      const index = event.detail.value;
      this.selectedBank = this.banks[index];
      this.selectedBankName = this.selectedBank.bank_name;
	  this.bank_code = this.selectedBank.bank_code;
    },
    onRegionChange(event) {
      // 获取选中的省、市、区
      const region = event.detail.value;
      this.selectedRegion = region.join(' '); // 将数组拼接成字符串，例如 "广东省 广州市 天河区"
    },
    openAgreement() {
      uni.showToast({
        title: '打开支付服务协议',
        icon: 'none',
      });
    },
    submitForm() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请完善信息并同意协议',
          icon: 'none',
        });
        return;
      }
	  let self = this;
	  uni.showLoading()
	  let parm = {edittype:self.is_edit,id:self.id, phone:self.phoneNumber,name:self.name, bank_name:self.selectedBank.bank_name,bank_code:self.selectedBank.bank_code,card_no:self.cardNumber,id_card:self.idCard,address:self.selectedRegion}
	  self._post('user.user/addBank', parm, function(res) {
	  	uni.hideLoading();
		if(res.code == 1){
			self.showSuccess(res.msg,() => {
				self.gotoPage('/pages/agent/bank/bank')
			});
		}else{
			self.showError(res.msg, () => {
				
			});
		}
	  });

    },
  },
};
</script>

<style>
page{
	background: #f6f6f6;
	font-size: 24rpx;
	height: 100% !important;
}	

.container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  height: 100%;
}

/* 顶部导航栏 */
.navbar {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #f8d7da;
  border-bottom: 1px solid #e5e5e5;
}

.back-icon {
  font-size: 18px;
  margin-right: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

/* 提示信息 */
.info-box {
  background-color: #f7b3b9;
  padding: 5px;
  color: white;
  font-size: 14px;
  margin: 5px;
  border-radius: 8px;
  line-height: 1.5;
}

/* 表单样式 */
.form {
  background-color: white;
  padding: 5px;
  margin: 5px;
  border-radius: 8px;
  
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 100%; /* 父容器宽度 100% */
}

.label {
  flex: 0 0 80px;
  font-size: 16px;
  color: #333;
}

.input {
  flex: 1;
  padding: 10px;
  /*border: 1px solid #ccc;*/
  border-bottom: 1px solid #ccc;
  /*border-radius: 5px;*/
}

/* picker 和文本样式 */
.picker {
  flex: 1; /* 占据剩余空间 */
}

.arrow-input {
  display: block; /* 确保占满宽度 */
  width: 100%; /* 设置宽度 100% */
  padding: 10px; /* 内边距 */
  /*border: 1px solid #ccc;  边框 */
  /*border-radius: 5px; /* 圆角 */
  font-size: 14px;
  color: #000000;
  box-sizing: border-box; /* 包含 padding 和 border */
  border-bottom: 1px solid #ccc;
}

/* 账户类型按钮 */
.type-buttons {
  display: flex;
}

.type-btn {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  background-color: white;
}

.type-btn.active {
  background-color: #f8d7da;
  color: white;
  border: none;
}

/* 协议样式 */
.agreement {
  align-items: flex-start;
  font-size: 12px;
}

.checkbox {
  margin-right: 5px;
}

.link {
  color: #007aff;
  text-decoration: underline;
}

/* 提交按钮 */
.confirm-btn {
  margin: 10px;
  padding: 5px;
  background-color: #fba5ad;
  color: white;
  text-align: center;
  border-radius: 8px;
  font-size: 16px;
}

.confirm-btn:disabled {
  background-color: #ccc;
}
</style>
